<template>
  <div class="bed-monitor-container">
    <!-- 页面标题（与首页风格统一） -->
    <div class="page-header">
      <h1>智能床位监测系统</h1>
      <div class="header-actions">
        <el-button 
          type="primary" 
          icon="Refresh" 
          size="small" 
          @click="handleRefresh"
        >
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 楼层切换Tab（带报警红点） -->
    <div class="floor-tabs">
      <el-button 
        v-for="floor in floors" 
        :key="floor.id"
        class="floor-tab"
        :class="{ 
          active: currentFloor === floor.id, 
          'red-dot': floor.hasAlarm 
        }"
        @click="currentFloor = floor.id"
      >
        {{ floor.name }}
      </el-button>
    </div>

    <!-- 房间列表 -->
    <div class="rooms-container">
      <el-card 
        v-for="room in filteredRooms" 
        :key="room.id"
        shadow="hover"
        class="room-card"
      >
        <!-- 房间头部信息 -->
        <div class="room-header">
          <div class="room-info">
            <div class="room-number">房间号: {{ room.roomNumber }}</div>
            <div class="room-devices">
              <img 
                v-for="device in room.devices" 
                :key="device.id"
                :src="getIconPath(device.icon)" 
                :alt="device.name"
                :title="device.tip || device.name"
                class="device-icon"
              >
            </div>
          </div>
          <div class="room-status">
            <div class="status-item">
              <span class="status-label">房门状态:</span>
              <span>{{ room.status.door }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">温度:</span>
              <span>{{ room.status.temperature }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">湿度:</span>
              <span>{{ room.status.humidity }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">报警状态:</span>
              <span :class="room.status.alarm === '报警' ? 'alarm-text' : ''">
                {{ room.status.alarm }}
              </span>
            </div>
          </div>
        </div>

        <!-- 床位网格（3列布局） -->
        <div class="bed-grid">
          <div 
            v-for="bed in room.beds" 
            :key="bed.id"
            class="bed-card"
            :class="{ 
              alarm: bed.isAlarm, 
              empty: bed.status === 'empty' 
            }"
          >
            <!-- 床位头部 -->
            <div class="bed-header">
              <div class="bed-info">
                <div class="bed-number">床位号: {{ bed.bedNumber }}</div>
                <div class="elder-name">老人姓名: {{ bed.elderName }}</div>
              </div>
              <div class="bed-devices">
                <img 
                  v-for="device in bed.devices" 
                  :key="device.id"
                  :src="getIconPath(device.icon)" 
                  :alt="device.name"
                  :title="device.tip || device.name"
                  class="device-icon"
                >
              </div>
            </div>

            <!-- 床位内容（非空床展示数据） -->
            <div class="bed-content" v-if="bed.status !== 'empty'">
              <div class="bed-icon">
                <img 
                  :src="getBedStatusIcon(bed.status)" 
                  :alt="getStatusText(bed.status)"
                  class="status-icon"
                >
              </div>
              <div class="bed-data">
                <!-- 清醒/睡眠状态：显示心率、呼吸率 -->
                <template v-if="bed.status === 'awake' || bed.status === 'sleep'">
                  <div class="bed-data-item">
                    <img :src="heartIcon" alt="心率" class="data-icon">
                    <div>心率: {{ bed.data.heartRate || 0 }}次/分</div>
                  </div>
                  <div class="bed-data-item">
                    <img :src="breathIcon" alt="呼吸率" class="data-icon">
                    <div>呼吸率: {{ bed.data.breathRate || 0 }}次/分</div>
                  </div>
                </template>
                <!-- 离床状态：显示离床次数、离床时间 -->
                <template v-if="bed.status === 'leave'">
                  <div class="bed-data-item">
                    <img :src="leaveCountIcon" alt="离床次数" class="data-icon">
                    <div>离床次数: {{ bed.data.leaveCount || 0 }}次</div>
                  </div>
                  <div class="bed-data-item">
                    <img :src="timeIcon" alt="离床时间" class="data-icon">
                    <div>离床时间: {{ bed.data.leaveTime || '--' }}</div>
                  </div>
                </template>
              </div>
            </div>

            <!-- 空床状态显示 -->
            <div class="empty-bed" v-else>
              <div class="empty-text">当前床位没有安排老人</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElButton, ElCard } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';

// 导入图标（使用正确的路径）
import heartIcon from '@/assets/icons/heart.png';
import breathIcon from '@/assets/icons/breath.png';
import leaveCountIcon from '@/assets/icons/leave-count.png';
import timeIcon from '@/assets/icons/time.png';
import awakeIcon from '@/assets/icons/awake.png';
import sleepIcon from '@/assets/icons/sleep.png';
import leaveIcon from '@/assets/icons/leave.png';
import smokeIcon from '@/assets/icons/smoke.png';
import sensorIcon from '@/assets/icons/sensor.png';
import deviceIcon from '@/assets/icons/device.png';
import monitorIcon from '@/assets/icons/monitor.png';
import alarmIcon from '@/assets/icons/alarm.png';

// 1. 模拟数据（与首页数据格式匹配）
const floors = ref([
  { id: '1', name: '1楼', hasAlarm: true }, // 带报警红点
  { id: '2', name: '2楼', hasAlarm: false },
  { id: '3', name: '3楼', hasAlarm: true }, // 三楼也有报警
]);

const rooms = ref([
  // ==================== 一楼数据 ====================
  // 101房间数据
  {
    id: 'r101',
    roomNumber: '101',
    floorId: '1',
    devices: [
      { 
        id: 'd1', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-01' 
      },
      { id: 'd2', icon: 'sensor', name: '传感器' },
      { id: 'd3', icon: 'device', name: '设备' },
    ],
    status: {
      door: '开启',
      temperature: '26℃',
      humidity: '40%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b1011',
        bedNumber: '1011',
        elderName: '高',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd1', icon: 'device', name: '设备' },
          { id: 'bd2', icon: 'monitor', name: '监测' },
          { id: 'bd3', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 80, breathRate: 20 },
      },
      {
        id: 'b1012',
        bedNumber: '1012',
        elderName: '高启盛',
        status: 'leave',
        isAlarm: false,
        devices: [
          { id: 'bd4', icon: 'device', name: '设备' },
          { id: 'bd5', icon: 'monitor', name: '监测' },
          { id: 'bd6', icon: 'alarm', name: '报警' },
        ],
        data: { leaveCount: 6, leaveTime: '20:00:00' },
      },
      {
        id: 'b1013',
        bedNumber: '1013',
        elderName: '高启兰',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd7', icon: 'device', name: '设备' },
          { id: 'bd8', icon: 'monitor', name: '监测' },
          { id: 'bd9', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 80, breathRate: 20 },
      },
      {
        id: 'b1014',
        bedNumber: '1014',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd10', icon: 'device', name: '设备' },
          { id: 'bd11', icon: 'monitor', name: '监测' },
          { id: 'bd12', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
      {
        id: 'b1015',
        bedNumber: '1015',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd13', icon: 'device', name: '设备' },
          { id: 'bd14', icon: 'monitor', name: '监测' },
          { id: 'bd15', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
      {
        id: 'b1016',
        bedNumber: '1016',
        elderName: '安欣',
        status: 'sleep',
        isAlarm: true,
        devices: [
          { id: 'bd16', icon: 'device', name: '设备' },
          { id: 'bd17', icon: 'monitor', name: '监测' },
          { id: 'bd18', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 110, breathRate: 25 },
      },
    ],
  },
  // 102房间数据
  {
    id: 'r102',
    roomNumber: '102',
    floorId: '1',
    devices: [
      { 
        id: 'd4', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-02' 
      },
      { id: 'd5', icon: 'sensor', name: '传感器' },
      { id: 'd6', icon: 'device', name: '设备' },
    ],
    status: {
      door: '开启',
      temperature: '26℃',
      humidity: '42%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b1021',
        bedNumber: '1021',
        elderName: '孟德海',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd19', icon: 'device', name: '设备' },
          { id: 'bd20', icon: 'monitor', name: '监测' },
          { id: 'bd21', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 78, breathRate: 19 },
      },
      {
        id: 'b1022',
        bedNumber: '1022',
        elderName: '李响',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd22', icon: 'device', name: '设备' },
          { id: 'bd23', icon: 'monitor', name: '监测' },
          { id: 'bd24', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 82, breathRate: 21 },
      },
      {
        id: 'b1023',
        bedNumber: '1023',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd25', icon: 'device', name: '设备' },
          { id: 'bd26', icon: 'monitor', name: '监测' },
          { id: 'bd27', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
    ],
  },

  // ==================== 二楼数据 ====================
  {
    id: 'r201',
    roomNumber: '201',
    floorId: '2',
    devices: [
      { 
        id: 'd7', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-03' 
      },
      { id: 'd8', icon: 'sensor', name: '传感器' },
      { id: 'd9', icon: 'device', name: '设备' },
    ],
    status: {
      door: '关闭',
      temperature: '25℃',
      humidity: '45%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b2011',
        bedNumber: '2011',
        elderName: '赵立冬',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd28', icon: 'device', name: '设备' },
          { id: 'bd29', icon: 'monitor', name: '监测' },
          { id: 'bd30', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 75, breathRate: 18 },
      },
      {
        id: 'b2012',
        bedNumber: '2012',
        elderName: '徐忠',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd31', icon: 'device', name: '设备' },
          { id: 'bd32', icon: 'monitor', name: '监测' },
          { id: 'bd33', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 85, breathRate: 22 },
      },
      {
        id: 'b2013',
        bedNumber: '2013',
        elderName: '纪泽',
        status: 'leave',
        isAlarm: false,
        devices: [
          { id: 'bd34', icon: 'device', name: '设备' },
          { id: 'bd35', icon: 'monitor', name: '监测' },
          { id: 'bd36', icon: 'alarm', name: '报警' },
        ],
        data: { leaveCount: 3, leaveTime: '19:30:00' },
      },
      {
        id: 'b2014',
        bedNumber: '2014',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd37', icon: 'device', name: '设备' },
          { id: 'bd38', icon: 'monitor', name: '监测' },
          { id: 'bd39', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
    ],
  },
  {
    id: 'r202',
    roomNumber: '202',
    floorId: '2',
    devices: [
      { 
        id: 'd10', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-04' 
      },
      { id: 'd11', icon: 'sensor', name: '传感器' },
      { id: 'd12', icon: 'device', name: '设备' },
    ],
    status: {
      door: '开启',
      temperature: '24℃',
      humidity: '48%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b2021',
        bedNumber: '2021',
        elderName: '谭思言',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd40', icon: 'device', name: '设备' },
          { id: 'bd41', icon: 'monitor', name: '监测' },
          { id: 'bd42', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 72, breathRate: 17 },
      },
      {
        id: 'b2022',
        bedNumber: '2022',
        elderName: '陆寒',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd43', icon: 'device', name: '设备' },
          { id: 'bd44', icon: 'monitor', name: '监测' },
          { id: 'bd45', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 88, breathRate: 20 },
      },
      {
        id: 'b2023',
        bedNumber: '2023',
        elderName: '张彪',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd46', icon: 'device', name: '设备' },
          { id: 'bd47', icon: 'monitor', name: '监测' },
          { id: 'bd48', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 76, breathRate: 19 },
      },
      {
        id: 'b2024',
        bedNumber: '2024',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd49', icon: 'device', name: '设备' },
          { id: 'bd50', icon: 'monitor', name: '监测' },
          { id: 'bd51', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
      {
        id: 'b2025',
        bedNumber: '2025',
        elderName: '杨健',
        status: 'leave',
        isAlarm: false,
        devices: [
          { id: 'bd52', icon: 'device', name: '设备' },
          { id: 'bd53', icon: 'monitor', name: '监测' },
          { id: 'bd54', icon: 'alarm', name: '报警' },
        ],
        data: { leaveCount: 5, leaveTime: '21:15:00' },
      },
    ],
  },

  // ==================== 三楼数据 ====================
  {
    id: 'r301',
    roomNumber: '301',
    floorId: '3',
    devices: [
      { 
        id: 'd13', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-05' 
      },
      { id: 'd14', icon: 'sensor', name: '传感器' },
      { id: 'd15', icon: 'device', name: '设备' },
    ],
    status: {
      door: '开启',
      temperature: '27℃',
      humidity: '38%',
      alarm: '报警',
    },
    beds: [
      {
        id: 'b3011',
        bedNumber: '3011',
        elderName: '陈书婷',
        status: 'sleep',
        isAlarm: true,
        devices: [
          { id: 'bd55', icon: 'device', name: '设备' },
          { id: 'bd56', icon: 'monitor', name: '监测' },
          { id: 'bd57', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 95, breathRate: 28 },
      },
      {
        id: 'b3012',
        bedNumber: '3012',
        elderName: '黄老',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd58', icon: 'device', name: '设备' },
          { id: 'bd59', icon: 'monitor', name: '监测' },
          { id: 'bd60', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 82, breathRate: 21 },
      },
      {
        id: 'b3013',
        bedNumber: '3013',
        elderName: '程程',
        status: 'leave',
        isAlarm: false,
        devices: [
          { id: 'bd61', icon: 'device', name: '设备' },
          { id: 'bd62', icon: 'monitor', name: '监测' },
          { id: 'bd63', icon: 'alarm', name: '报警' },
        ],
        data: { leaveCount: 8, leaveTime: '22:00:00' },
      },
    ],
  },
  {
    id: 'r302',
    roomNumber: '302',
    floorId: '3',
    devices: [
      { 
        id: 'd16', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-06' 
      },
      { id: 'd17', icon: 'sensor', name: '传感器' },
      { id: 'd18', icon: 'device', name: '设备' },
    ],
    status: {
      door: '关闭',
      temperature: '26℃',
      humidity: '42%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b3021',
        bedNumber: '3021',
        elderName: '王秘书',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd64', icon: 'device', name: '设备' },
          { id: 'bd65', icon: 'monitor', name: '监测' },
          { id: 'bd66', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 78, breathRate: 20 },
      },
      {
        id: 'b3022',
        bedNumber: '3022',
        elderName: '李有田',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd67', icon: 'device', name: '设备' },
          { id: 'bd68', icon: 'monitor', name: '监测' },
          { id: 'bd69', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 84, breathRate: 23 },
      },
      {
        id: 'b3023',
        bedNumber: '3023',
        elderName: '李宏伟',
        status: 'sleep',
        isAlarm: true,
        devices: [
          { id: 'bd70', icon: 'device', name: '设备' },
          { id: 'bd71', icon: 'monitor', name: '监测' },
          { id: 'bd72', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 105, breathRate: 30 },
      },
      {
        id: 'b3024',
        bedNumber: '3024',
        elderName: '-',
        status: 'empty',
        isAlarm: false,
        devices: [
          { id: 'bd73', icon: 'device', name: '设备' },
          { id: 'bd74', icon: 'monitor', name: '监测' },
          { id: 'bd75', icon: 'alarm', name: '报警' },
        ],
        data: {},
      },
    ],
  },
  {
    id: 'r303',
    roomNumber: '303',
    floorId: '3',
    devices: [
      { 
        id: 'd19', 
        icon: 'smoke', 
        name: '智能烟感', 
        tip: '智能烟感 smoke alarm-07' 
      },
      { id: 'd20', icon: 'sensor', name: '传感器' },
      { id: 'd21', icon: 'device', name: '设备' },
    ],
    status: {
      door: '开启',
      temperature: '25℃',
      humidity: '44%',
      alarm: '正常',
    },
    beds: [
      {
        id: 'b3031',
        bedNumber: '3031',
        elderName: '高晓晨',
        status: 'awake',
        isAlarm: false,
        devices: [
          { id: 'bd76', icon: 'device', name: '设备' },
          { id: 'bd77', icon: 'monitor', name: '监测' },
          { id: 'bd78', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 90, breathRate: 24 },
      },
      {
        id: 'b3032',
        bedNumber: '3032',
        elderName: '黄瑶',
        status: 'sleep',
        isAlarm: false,
        devices: [
          { id: 'bd79', icon: 'device', name: '设备' },
          { id: 'bd80', icon: 'monitor', name: '监测' },
          { id: 'bd81', icon: 'alarm', name: '报警' },
        ],
        data: { heartRate: 74, breathRate: 18 },
      },
    ],
  },
]);

// 2. 状态管理
const currentFloor = ref('1'); // 当前选中楼层

// 3. 计算属性：根据当前楼层筛选房间
const filteredRooms = computed(() => {
  return rooms.value.filter(room => room.floorId === currentFloor.value);
});

// 4. 图标映射
const iconMap = {
  heart: heartIcon,
  breath: breathIcon,
  'leave-count': leaveCountIcon,
  time: timeIcon,
  awake: awakeIcon,
  sleep: sleepIcon,
  leave: leaveIcon,
  smoke: smokeIcon,
  sensor: sensorIcon,
  device: deviceIcon,
  monitor: monitorIcon,
  alarm: alarmIcon,
};

// 5. 工具函数
// 获取图标路径
const getIconPath = (iconKey) => {
  return iconMap[iconKey] || deviceIcon;
};

// 获取床位状态对应的图标
const getBedStatusIcon = (status) => {
  const statusIconMap = {
    awake: awakeIcon,
    sleep: sleepIcon,
    leave: leaveIcon,
  };
  return statusIconMap[status] || deviceIcon;
};

// 获取床位状态文本
const getStatusText = (status) => {
  const textMap = {
    awake: '清醒中',
    sleep: '睡眠中',
    leave: '已离床',
    empty: '空床',
  };
  return textMap[status] || '未知状态';
};

// 刷新数据交互
const handleRefresh = () => {
  // 模拟数据刷新（实际项目中可替换为接口请求）
  ElMessage({
    message: '数据已刷新',
    type: 'success',
    duration: 1000,
  });
};
</script>

<style scoped>
/* 样式保持不变，与之前相同 */
/* 全局容器样式 */
.bed-monitor-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题（与首页一致） */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 楼层Tab样式 */
.floor-tabs {
  display: flex;
  margin-bottom: 20px;
  gap: 4px;
}

.floor-tab {
  padding: 8px 16px;
  background-color: #e5e7eb;
  border: none;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  transition: all 0.2s;
}

.floor-tab.active {
  background-color: #fff;
  font-weight: bold;
  box-shadow: 0 -2px 0 0 #42b983 inset;
}

/* 报警红点 */
.floor-tab.red-dot::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #ff4d4f;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

/* 房间卡片样式 */
.rooms-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.room-card {
  transition: all 0.3s ease;
}

.room-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 房间头部样式 */
.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.room-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-number {
  font-weight: bold;
  font-size: 16px;
}

.room-devices {
  display: flex;
  align-items: center;
  gap: 4px;
}

.device-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.room-status {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.status-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.status-label {
  margin-right: 4px;
  color: #666;
}

.alarm-text {
  color: #ff4d4f;
  font-weight: bold;
}

/* 床位网格样式 */
.bed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* 床位卡片样式 */
.bed-card {
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s;
  border: 2px solid transparent;
  min-height: 120px;
}

.bed-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 报警床位样式 */
.bed-card.alarm {
  background-color: #fecaca;
  border: 2px solid #ff4d4f;
  animation: pulse-alarm 2s infinite;
}

@keyframes pulse-alarm {
  0% { border-color: #ff4d4f; }
  50% { border-color: #ff7875; }
  100% { border-color: #ff4d4f; }
}

/* 空床样式 */
.bed-card.empty {
  background-color: #f9fafb;
  border: 2px dashed #d1d5db;
}

.empty-bed {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-text {
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
}

/* 床位头部样式 */
.bed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.bed-info {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.bed-number, .elder-name {
  margin-bottom: 4px;
  font-weight: 500;
}

.bed-devices {
  display: flex;
  align-items: center;
  gap: 2px;
}

.bed-devices .device-icon {
  width: 16px;
  height: 16px;
}

/* 床位内容样式 */
.bed-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bed-icon {
  flex-shrink: 0;
}

.status-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.bed-data {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  flex: 1;
}

.bed-data-item {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  gap: 6px;
}

.data-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 响应式适配（与首页一致） */
@media (max-width: 1200px) {
  .bed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bed-grid {
    grid-template-columns: 1fr;
  }

  .room-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .room-status {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .bed-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>